<template>
  <div class="dispach-box">
    <div class="dispach-box-table">
      <el-table :data="state.dispachData" border>
        <el-table-column
          label="序号"
          show-overflow-tooltip
          align="center"
          width="50"
          type="index"
        ></el-table-column>
        <el-table-column
          prop="tm"
          label="时间"
          show-overflow-tooltip
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="fq"
          label="入库流量(m³/s)"
          show-overflow-tooltip
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="otq"
          label="出库流量(m³/s)"
          show-overflow-tooltip
          align="center"
          width="180"
        >
          <template #header>
            <el-radio-group v-model="state.ins.insType" @change="handleRadio">
              <el-radio :label="0">{{ '' }}</el-radio>
            </el-radio-group>
            出库流量(m³/s)
          </template>
          <template #default="scope">
            <el-input
              v-model="scope.row.otq"
              size="mini"
              @change="handleEnterVal(scope.$index, 'otq', scope.row.otq)"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="kd"
          label="闸门开度"
          show-overflow-tooltip
          align="center"
          width="150"
        >
          <template #header>
            <el-radio-group v-model="state.ins.insType" @change="handleRadio">
              <el-radio :label="1">{{ '' }}</el-radio>
            </el-radio-group>
            闸门开度
            <el-select
              v-model="state.ins.zmnum"
              placeholder=""
              size="small"
              @change="handleZmnumOpen"
            >
              <el-option v-for="item in state.gateNum" :key="item" :label="item" :value="item">
              </el-option>
            </el-select>
          </template>
          <template #default="scope">
            <el-input
              v-model="scope.row.kd"
              size="mini"
              @change="handleEnterVal(scope.$index, 'kd', scope.row.kd)"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="zr"
          label="预库水位(m)"
          show-overflow-tooltip
          align="center"
          width="180"
        >
          <template #header>
            <el-radio-group v-model="state.ins.insType" @change="handleRadio">
              <el-radio :label="2">{{ '' }}</el-radio>
            </el-radio-group>
            预库水位(m)
          </template>
          <template #default="scope">
            <el-input
              v-model="scope.row.zr"
              size="mini"
              @change="handleEnterVal(scope.$index, 'zr', scope.row.zr)"
            ></el-input>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="dispach-box-input" v-if="state.ins.insType == 1">
      <span class="title">控制末水位：</span>

      <el-input v-model="state.ins.kzmz"></el-input>
    </div>
  </div>
</template>

<script setup>
import { reactive, watch, defineExpose } from 'vue'
import { getResvInsResult } from '@/services/modules/dispatch-manage'

const state = reactive({
  // 选择radio
  // insType: 0,
  // 末水位
  endWaterLevel: '',
  acceptData: {},

  // 列表数据
  dispachData: [
    // {
    //   tm: '0307 10:00',
    //   enterFlow: '100',
    //   outFlow: '123.6',
    //   Opening: '20',
    //   waterLevel: '150'
    // },
    // {
    //   tm: '0307 10:00',
    //   enterFlow: '120',
    //   outFlow: '133.6',
    //   Opening: '10',
    //   waterLevel: '80'
    // },
    // {
    //   tm: '0307 10:00',
    //   enterFlow: '110',
    //   outFlow: '183.6',
    //   Opening: '50',
    //   waterLevel: '130'
    // },
    // {
    //   tm: '0307 10:00',
    //   enterFlow: '190',
    //   outFlow: '203.6',
    //   Opening: '70',
    //   waterLevel: '170'
    // },
    // {
    //   tm: '0307 10:00',
    //   enterFlow: '200',
    //   outFlow: '303.6',
    //   Opening: '85',
    //   waterLevel: '220'
    // },
    // {
    //   tm: '0307 10:00',
    //   enterFlow: '230',
    //   outFlow: '403.6',
    //   Opening: '80',
    //   waterLevel: '330'
    // }
  ],

  // 获取水库闸门个数 数据
  gateNum: [],

  ins: {
    insType: 0,
    // 开闸门数
    zmnum: 1,
    // 闸门控制末水位
    kzmz: 0,
    // 数组数据
    vals: []
  }
})
const props = defineProps({
  scid: {
    type: String,
    default: ''
  },
  blkcd: {
    type: String,
    default: ''
  },
  insPro: {
    type: Object,
    default: () => {}
  }
})
watch(
  () => {
    props.insPro
  },
  () => {
    console.log(props.insPro)
  },
  {
    deep: true,
    immediate: true
  }
)
watch(
  () => state.ins.insType,
  () => {
    console.log('改变')

    // 处理列表数据
    getTableData()
  },
  {
    deep: true,
    immediate: true
  }
)
// 监听父方案
watch(
  () => props.scid,
  () => {
    acceptResvInsResult()
  },
  {
    deep: true,
    immediate: true
  }
)
watch(
  () => props.blkcd,
  () => {
    acceptResvInsResult()
  },
  {
    deep: true,
    immediate: true
  }
)
// 回显处理
function handleBackData() {
  let name = ''
  if (state.ins.insType == 0) {
    name = 'otq'
  } else if (state.ins.insType == 1) {
    name = 'kd'
  } else if (state.ins.insType == 2) {
    name = 'zr'
  }
  state.dispachData.forEach((e, index) => {
    state.ins.vals.forEach((a, index1) => {
      if (index == index1) {
        e.tm = a.insTm
        e[name] = a.insVal
      }
    })
  })
}
function acceptResvInsResult() {
  getResvInsResult({ scid: props.scid, blkcd: props.blkcd }).then((res) => {
    if (res.code == 200) {
      state.acceptData = res.data
      // 获取列表数据
      state.dispachData = res.data?.insResult
      // 获取闸门个数
      state.gateNum = res.data?.zmInfos?.znum

      getTableData()
      if (props.insPro) {
        state.ins = Object.assign({}, JSON.parse(JSON.stringify(props.insPro)))

        handleBackData()
      }
    }
  })
}
//  转换当前输入行以下的值indexVal:输入的行的index，keyName:键,enterVal输入的值
function handleEnterVal(indexVal, keyName, enterVal) {
  state.dispachData.forEach((e, index) => {
    //如果列表数据的index >= 列表数据当前行的indexVal则将后面的对应数据替换
    if (index >= indexVal) {
      state.dispachData[index][keyName] = enterVal
      state.ins.vals[index].insVal = enterVal
    }
  })
}
// 拿到列表中需要传递后端的数据
function getTableData() {
  // 判断radio对应的某个字段
  let name = ''
  if (state.ins.insType == 0) {
    name = 'otq'
  } else if (state.ins.insType == 1) {
    name = 'kd'
  } else if (state.ins.insType == 2) {
    name = 'zr'
  }

  state.ins.vals = state.dispachData.map((e) => {
    return { insTm: e['tm'], insVal: e[name] }
  })
}
// 选择闸门开度，获取对应数据并且合并到列表中
function handleZmnumOpen(val) {
  state.acceptData.zmInfos.zmList.forEach((e) => {
    // 如果闸门数相等
    if (e.znum == val) {
      e.kd.forEach((y, index) => {
        state.dispachData.forEach((a, index1) => {
          if (index == index1) {
            a.kd = y
          }
        })
      })
    }
    // 如果闸门数都不相等
    else {
      state.dispachData.forEach((a, index1) => {
        a.kd == 0.0
      })
    }
  })
}
defineExpose({ state })
</script>

<style lang="less" scoped>
.dispach-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  .dispach-box-table {
    height: calc(100% - 60px);
    .el-table {
      height: 100%;
    }
  }
  // margin-bottom: 10px;
  .dispach-box-input {
    .title {
      width: 110px;
      font-size: 14px;
    }
    .el-input {
      width: 200px;
    }
    display: flex;
    align-items: center;
    height: 50px;
    flex: 1;
  }
}
</style>
